<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>康心志移动端</title>
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/swiper.min.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <section class="wrap">
        <header class="header">移动端练习</header>
        <nav class="nav">
            <a href="" class="item">
                <img src="images/3.jpg" />
                <span>刘德华</span>
            </a>
            <a href="" class="item">
                <img src="images/3.jpg" />
                <span>刘德华</span>
            </a> <a href="" class="item">
                <img src="images/3.jpg" />
                <span>刘德华</span>
            </a> <a href="" class="item">
                <img src="images/3.jpg" />
                <span>刘德华</span>
            </a> <a href="" class="item">
                <img src="images/3.jpg" />
                <span>刘德华</span>
            </a> <a href="" class="item">
                <img src="images/3.jpg" />
                <span>刘德华</span>
            </a>
        </nav>

        <section class="go">
            <img src="images/go.png" />
        </section>
    </section>

    <section class="content">
        <!-- 就业指导模块 -->
        <div class="con_td">
            <h4>就业指导</h4>
            <a href="#" class="more">更多>></a>
        </div>
        <div class="get_job_focus">
            <!-- Swiper -->
            <div class="swiper-container get_job">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <a href="#"><img src="./images/pic.png" alt=""></a>
                        <p>你好啊我是康心志</p>
                    </div>
                    <div class="swiper-slide">
                        <a href="#"><img src="./images/pic1.png" alt=""></a>
                        <p>康心志01加油</p>
                    </div>
                    <div class="swiper-slide">
                        <a href="#"><img src="./images/pic2.png" alt=""></a>
                        <p>康心志02加油</p>
                    </div>

                </div>

            </div>
            <!-- 左右箭头 -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
    </section>
    <section class="content study_con">
        <!-- 充电学习模块 -->
        <div class="con_td">
            <h4>充电学习</h4>
            <a href="#" class="more">更多>></a>
        </div>
        <div class="study">
            <div class="swiper-container study_fo">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="./images/pic1.png" alt="">
                        <h5>javaee</h5>
                        <p>156人学习</p>
                    </div>
                   
                    <div class="swiper-slide">
                        <img src="./images/pic2.png" alt="">
                        <h5>vue</h5>
                        <p>157人学习</p>
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/pic1.png" alt="">
                        <h5>java</h5>
                        <p>15人学习</p>
                    </div>
                   
                    <div class="swiper-slide">
                        <img src="./images/pic2.png" alt="">
                        <h5>软件测试</h5>
                        <p>136人学习</p>
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/pic1.png" alt="">
                        <h5>python</h5>
                        <p>186人学习</p>
                    </div>
                   
                    <div class="swiper-slide">
                        <img src="./images/pic2.png" alt="">
                        <h5>移动端</h5>
                        <p>加油！</p>
                    </div>
                </div>
        </div>
    </section>
    <footer class="footer">
        <a href="" class="item"><p>首页</p></a>
        <a href="" class="item"><p>技术面试</p></a>
        <a href="" class="item"><p>模拟面试</p></a>
        <a href="" class="item"><p>我的主页</p></a>
    </footer>


 

</body>
<script src="./js/flexible.js"></script>
<script src="./js/swiper.min.js"></script>
<script>
    (function () {
        var swiper = new Swiper('.get_job', {
            slidesPerView: 2,//能够显示的图片

            spaceBetween: 30,//每个盒子之间的距离

            centeredSlides: true,//当前盒子是否在中间
            loop: true,
            // // 分页器没用到
            // pagination: {
            //     el: '.swiper-pagination',
            //     clickable: true,
            // },
            // 左右箭头
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });
    })();
    (function () {
        var swiper = new Swiper('.study_fo', {
            slidesPerView: 2.5,
            spaceBetween: 30,
          
        });

    })();
</script>
</html>